<template>
  <div id="" class="leaseListDiv">
    <!--滑动区域-->
		<div id="mescroll" class="mescroll" style="position:fixed; top:50px; bottom:0; height:auto;">
			<!--展示上拉加载的数据列表-->
      <ul id="dataList" style="margin-bottom:0;">
        <li v-for="(houseInfo,index) in pdlist" :key="houseInfo.key">
          <p class="leaseTit">
            <span>{{houseInfo.contractTitle}}</span>
            <em class="waitSign">待支付</em>
            <!-- <em class="waitSign">
              已逾期<br>
              (逾期X天)
            </em> -->
          </p>
          <div class="houseDiv">
            <!-- <img :src="houseInfo.housePic" alt="" class="houseImg"/> -->
            <div class="houseImg" :style="{backgroundImage:'url(' + houseInfo.housePic + ')'}">

            </div>
            <div class="houseCon">
              <span class="title">{{houseInfo.billTitle}}</span>
              <p v-if="houseInfo.billType==2"></p><!-- 退租补差账单不显示账单日期  billType =2 -->
              <p class="" v-else>租期{{setRentTime(index)}}</p>
              <p>&yen;{{(houseInfo.billMoney/100).toFixed(2)}}</p>
            </div>
          </div>
          <!-- 水电账单情况会有支付时间 -->
          <!-- <p class="payforTime">支付时间：2017.06.12 17：30</p> -->
          <div class="btnBox">
            <span> </span>
            <span> </span>
            <span>
              <button type="button" class="btn" @click="toBilldetail(index)">
                查看详情
              </button>
            </span>
            <span>
              <button type="button" class="inlineBtn" @click="payforBill(index)">支付账单</button>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/javascript" src="./nonBill.js"></script>
<style lang="scss" scoped>
.leaseListDiv{
  background: #f5f5f5;
  li{
    background: white;
    padding:10px;
    margin-bottom: 10px;
  }
}
.leaseTit{
  @include flex;
  justify-content: space-between;
  align-items: flex-start;
  span{
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  em{
    text-align: right;
    &.signed{
      color: $greenColor;
    }
    &.tuiRent{
      color:$blueColor;
    }
    &.waitSign{
      color: $redColor;
    }
  }
}
.houseDiv{
  @include flex;
  padding: 10px 0;
  .houseImg{
    border-radius: 4px;
    width: 100px;
    height: 80px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .houseCon{
    margin-left: 10px;
    @include flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    // height: 80px;
  }
  .title{
    font-size: 16px;
    font-weight: 550;
  }
}

.payforTime{
  padding: 5px 10px;
  background: $eeeColor;
  color: $grayColor;
  font-size: 0.9rem;
  margin-bottom: 5px;
}
.btnBox{
  @include flex;
  span{
    @include flexcell;
    margin-right: 10px;
    height: 2.4rem;
    button{
      width: 96%;
      padding-left: 2%;
      padding-right: 2%;
    }
    &:last-child{
      flex:1.3;
      margin-right: 0;
    }
  }
}
.keywords{
  span{
    margin-right: 6px;
    margin-bottom: 4px;
    display: inline-block;
    background: #eef0f4;
    color: #8996a2;
    border-radius: 4px;
    padding:2px 6px;
    font-size: 10px;
  }
}
</style>
